<template>
  <!-- 基本信息  -->
  <view class="container">
    <view class="background-white bor-top">
      <view class="bor-btm"
        ><text>姓名：</text><text>{{ userData.staffName }}</text>
      </view>
      <view class="bor-btm"
        ><text>工号：</text><text>{{ userData.jobNumber }}</text></view
      >
      <view class="bor-btm"
        ><text>联系电话：</text><text>{{ userData.phone }}</text></view
      >
      <view class="bor-btm"
        ><text>所属部门：</text><text>{{ userData.deptName }}</text></view
      >
      <view class="bor-btm"
        ><text>岗位：</text><text> {{ userData.postNames }}</text></view
      >
      <view class="bor-btm"
        ><text>学历：</text><text>{{ userData.educationLabel }}</text></view
      >
      <view class="bor-btm"
        ><text>生日：</text><text>{{ userData.birthday }}</text></view
      >
      <view class="bor-btm"
        ><text>性别：</text><text>{{ userData.sexLabel }}</text></view
      >
      <view class="bor-btm"
        ><text>邮件：</text><text>{{ userData.email }}</text></view
      >
      <view class="bor-btm"
        ><text>入职日期：</text><text>{{ userData.entryDate }}</text></view
      >
      <view class="bor-btm"
        ><text>转正日期：</text><text>{{ userData.positiveDate }}</text></view
      >
      <view
        ><text>职称：</text><text>{{ userData.jobTitles }}</text></view
      >
    </view>
  </view>
</template>

<script>
import { getUserInfo } from "@/api/system/user.js";
export default {
  data() {
    return {
      userData: {},
    };
  },
  onLoad() {
    this.getUserData();
  },
  methods: {
    getUserData() {
      getUserInfo().then((res) => {
        this.userData = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx 1rpx 30rpx;

    view {
      display: flex;
      padding: 20rpx 0;
      color: #999;
      text-align: right;

      text {
        &:nth-child(1) {
          width: 23%;
        }

        &:nth-child(2) {
          flex: 1;
          text-align: left;
          color: #333;
          display: inline-block;
          vertical-align: top;
        }
      }
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }
  }
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}
</style>
